<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import {
  reactive,
  onMounted,
  watch,
  getCurrentInstance,
  computed
} from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { filterArticleItem } from '@/utils/api/article'
import Pagination from '@/components/Layer/Pagination.vue'
const app = getCurrentInstance()
const { dayjs } =
  app.appContext.app.config.globalProperties
const page = reactive({
  total: 0,
  page: 1,
  size: 8
})

const route = useRoute()
const _data = reactive({
  article_list: [
    // {
    //   title: 'Adams网易云音乐独立版',
    //   background: '/article-test-bg.png',
    //   content: '',
    //   uuid: 'aaa',
    //   updateTime: '2017-05-24T16:46:11+08:00',
    //   datetime: '2017-05-24T16:46:11+08:00',
    //   likes: 79,
    //   description: 'Adams网易云音乐独立版'
    // }
  ]
})

watch(
  () => route.params.id,
  async () => {
    _data.article_list = []
    await getArticleList()
  }
)

const search_handler = computed(() => {
  if (route.path.includes('/search')) {
    return true
  }
  return false
})
const getArticleList = async () => {
  let params = {
    pageNum: page.page,
    pageSize: page.size
  }
  if (search_handler.value) {
    params = {
      ...params,
      articleTitle: route.query.q,
      summary: route.query.q
    }
  }
  let data = await filterArticleItem(
    route.params.id,
    params
  )
  console.log(data)

  _data.article_list = data.data.rows
  page.total = data.data.total
}

watch(
  () => page.page,
  async () => {
    await getArticleList()
  }
)

onMounted(async () => {
  if (search_handler.value) {
    console.log('进入搜索')
  }
  await getArticleList()
})
</script>

<template>
  <div class="article-list">
    <article
      class="article-item"
      v-for="(
        article, index
      ) in _data.article_list"
      :key="index"
    >
      <RouterLink
        :to="`/article/${article.id}`"
        class="article-mask"
        :title="article.articleTitle"
      >
        <div
          v-if="article.headImg"
          class="article-thumbnail"
          :style="{
            backgroundImage: `url(${article.headImg})`
          }"
        ></div>

        <div v-else class="article-thumbnail">
          <main class="article-body">
            <p
              class="text-tiny text-gray"
              itemprop="about"
            >
              {{ article.summary }}
            </p>
          </main>
        </div>
        <header class="article-header">
          <h2
            class="article-title h5 text-dark text-ellipsis"
            itemprop="headline"
          >
            {{ article.articleTitle }}
          </h2>
          <div class="article-subtitle text-gray">
            <ul
              class="d-flex text-tiny text-gray reset-ul"
            >
              <li class="time">
                <i class="czs-time"></i>
                <time>
                  {{
                    dayjs(
                      new Date(article.updateTime)
                    ).fromNow()
                  }}
                </time>
              </li>
              <!-- <li class="likes">
                <i class="czs-heart">{{ article.likes }}</i>
              </li> -->
            </ul>
          </div>
        </header>
      </RouterLink>
    </article>
  </div>
  <Pagination v-model="page" />
</template>

<style scoped lang="scss">
.article-list {
  min-height: 20rem;
}
</style>
